<template>
  <el-container>
    <el-header>
      <div style="width: 400px;">
        <p style="float: left;">
            <el-icon style="color: rgb(100, 111, 233);" :size="50"><SwitchFilled /></el-icon>
        </p>
        <p style="float: left; font-size: 25px; font-weight: bold;">欢迎登录数据中心</p>
      </div>
    </el-header>
    <el-main>
      <el-card class="login_card">
        <el-form :model="loginInfo" :rules="rules" ref="ruleFormRef">
          <el-form-item label="账号：" prop="username">
            <el-input v-model="loginInfo.username" placeholder="请输入账号"/>
          </el-form-item>
          <el-form-item label="密码：" prop="password">
            <el-input type="password" v-model="loginInfo.password" placeholder="请输入密码"/>
          </el-form-item>
            <el-form-item style="padding-left: 35%;">
              <el-button type="primary" @click="onSubmit">登录</el-button>
              <el-button type="primary" @click="resetForm">重置</el-button>
            </el-form-item>
        </el-form>
      </el-card>
    </el-main>
    <el-footer>
      <p>关于我们 | 联系我们</p>
      <p>Copyright © 2001-2022 <el-tag>公众号：技术</el-tag></p>
    </el-footer>
  </el-container>
</template>
<script setup>
import router from '@/router';
import { login } from '../api/index';
import { reactive, ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
const loginInfo = reactive({
  username: "",
  password: ""
});
const ruleFormRef = ref();
const rules = reactive({
  username: [{required: true, message: "账号不能为空", trigger: "blur"}],
  password: [{ required: true, message: "密码不能为空", trigger: "blur" }]
});
const onSubmit = () => {
  if (!ruleFormRef) return;
  ruleFormRef.value.validate(async (valid) => {
    if (valid) {
      const res = await login(loginInfo);
      if (res.status === 2000){
        window.sessionStorage.setItem("token", res.data.token);
        window.sessionStorage.setItem("username", res.data.user_info.username);
        router.push({
          path: '/',
          query: {
            "id": res.data.user_info.id,
            "username": res.data.user_info.username
          }
        });
      } else {
        ElMessage.error(res.message)
      }
    } else {
      return false;
    }
  })
};
const resetForm = () => {
  loginInfo.username = "";
  loginInfo.password = "";
}
</script>
  
<style scoped>
.el-container{
  background-image: url(@/static/neom-ua-yfFmM_UU-unsplash.jpg);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  min-height: 100vh;
}

.el-header{
  height: 10%;
}

.el-main{
  padding-left: 10%;
  height: 80%;
}

.login_card{
  margin: 100px 200px;
  width: 25%;
  min-width: 300px;
  padding-top: 50px;
  height: 200px;
  border-radius: 10px;
}

.login_input{
  margin: 0;
}

.el-footer{
  height: 10%;
  text-align: center;
}
/* 
.login-background {
  background-image: url(@/static/neom-ua-yfFmM_UU-unsplash.jpg);
background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  min-height: 100vh;
}

.login-bgcolor {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.login-content {
  width: 500px;
  height: 300px;
  background: #c3e6e6;
  border-radius: 5px;
}

.login-title {
  text-align: center;
  padding-top: 30px;
  font-size: 26px;
}

.login-info {
  display: flex;
  align-items: center;
  width: 400px;
  height: 40px;
  padding-top: 30px;
  margin: 0 auto;
}

.login-info p {
  width: 50px;
  font-size: 16px;
  color: #000000;
}

.login-flex {
  flex: 1;
}

.login-submit {
  text-align: center;
  margin-top: 20px;
} */
</style>